<template>
  <div class="page">
    <div class="pdh">
      <nav-bar></nav-bar>
    </div>
    <div>
      <div class="pdh">
        <card-list v-if="nav == 'card'"></card-list>
        <sentence-list v-if="nav == 'sentence'"></sentence-list>
      </div>
    </div>
    <div class="fix-bottom">
      <notify-btn :slotData="slotData"
        @hit="handlePreviewHomeword"
        :disabled="!exerciseSelectIds.length"
        cls="ui btn primary no-rounder">预览作业内容（已选{{slotData.exerciseSelectNum}}约{{slotData.estimatedCompleteTime}}分钟）</notify-btn>
    </div>
  </div>
</template>
<script>
import NotifyBtn from '@/components/notify-btn'
import NavBar from './nav-bar.vue'
import CardList from './card-list.vue'
import SentenceList from './sentence-list.vue'
import {mapState, mapActions, mapGetters} from 'vuex'
export default {
  components: {
    NavBar,
    NotifyBtn,
    CardList,
    SentenceList,
  },
  computed: {
    ...mapState('exercise-select', [
      'nav',
      'exerciseSelectIds'
    ]),
    ...mapGetters('exercise-select', [
      'estimatedCompleteTime'
    ]),
    slotData () {
      return {
        estimatedCompleteTime: this.estimatedCompleteTime,
        exerciseSelectNum: this.exerciseSelectIds.length
      }
    }
  },
  onShow () {
    this.handleInit()
  },
  methods: {
    ...mapActions('exercise-select', [
      'handleInit',
      'handlePreviewHomeword',
    ])
  }
}
</script>

</script>

<style scoped lang="less">
</style>
